<template>
  <div id="page-forget-pass" :style="{ 'background-image': background }">
    <div class="container-box" :style="{'opacity':0.96}">
      <div class="register-tips" v-if="registerTips">{{ registerTips }}</div>
      <h1 class="tc">重置密码</h1>

      <Form ref="form" :model="form.data" :rules="rules" label-position="top">
        <FormItem prop="mobile" label="手机号码">
          <Input type="text" v-model="form.data.mobile" placeholder="请输入11位手机号码" :maxlength="11" />
        </FormItem>
        <FormItem prop="mobileCode" label="验证码">
          <Row>
            <Col span="18">
              <Input type="text" v-model="form.data.mobileCode" placeholder="请输入短信验证码" :maxlength="6"/>
            </Col>
            <Col span="3" offset="1">
              <time-count-btn ref="timeCountBtn" type="info" @run="getSmsCode('form')"></time-count-btn>
            </Col>
          </Row>
        </FormItem>
        <FormItem prop="pwd" label="新密码">
          <Input type="password" v-model="form.data.pwd" placeholder="请设置6-12位新登录密码" :maxlength="12"/>
        </FormItem>
        <FormItem prop="confirmPassword" label="确认密码">
          <Input type="password" v-model="form.data.confirmPassword" placeholder="请再次输入密码" :maxlength="12"/>
        </FormItem>
        <FormItem>
          <Button
            type="primary"
            size="large"
            long
            :loading="isSubmiting"
            @click="onSubmit('form')">
            提交
          </Button>
          <Button
            type="ghost"
            size="large"
            long
            @click="goLogin()"
            class="mt10">
            返回
          </Button>
        </FormItem>
      </Form>
    </div>
  </div>
</template>

<script>
  import _ from 'underscore'
  import accountApi from '@/api/account'
  import timeCountBtn from '@/components/time-count-btn'

  export default {
    name: 'page-forget-pass',
    components: {
      timeCountBtn
    },
    data () {
      let validatePassAgain = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.form.data.pwd) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }

      return {
        isSubmiting: false,
        registerTips: null,
        form: {
          data: {
            pwd: '',
            confirmPassword: '',

            mobile: '',
            mobileCode: ''
          }
        },
        rules: {
          pwd: [
            { required: true, message: '请设置6-12位登录密码', trigger: 'change' },
            { type: 'string', min: 6, message: '密码长度应为6-12位', trigger: 'change' }
          ],
          confirmPassword: [
            { required: true, message: '请再次输入密码', trigger: 'change' },
            { validator: validatePassAgain, trigger: 'change' }
          ],
          mobile: [
            { required: true, message: '请输入11位手机号', trigger: 'change' }
          ],
          mobileCode: [
            { required: true, message: '请输入验证码', trigger: 'change' }
          ]
        }
      }
    },
    computed: {
      background: () => {
        let path = `http://image.1m5bike.com/image/jpg/public/bj${_.random(1, 6)}.jpg`
        return `url(${path})`
      }
    },
    methods: {
      goLogin () {
        this.$router.push({ path: '/login' })
      },
      getSmsCode () {
        this.$refs.form.validateField('mobile', async (valid) => {
          if (valid) {
            // this.$Notice.open({
            //   title: '请先输入手机号'
            // })
            return
          } else {
            let { body } = await accountApi.sendForgetPassSmsCode({
              mobile: this.form.data.mobile
            })
            if (this.$apiHelper.requestSuccessed(body.responseCode)) {
              this.$refs.timeCountBtn.start()
              this.$Message.info('短信发送成功')
            } else {
              setTimeout(() => {
                this.$Modal.warning({
                  title: '提示',
                  content: body.desc,
                  onOk: () => {}
                })
                this.$refs.timeCountBtn.stop()
              }, 500)
            }
          }
        })
      },
      onSubmit (formName) {
        this.registerTips = ''
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.isSubmiting = true
            this.sendForgetPass()
          } else {
            return false
          }
        })
      },
      async sendForgetPass () {
        let { body } = await accountApi.sendForgetPass(this.form.data)
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.$router.push({path: '/forget-password/success'})
        } else {
          setTimeout(() => {
            this.$Modal.warning({
              title: '提示',
              content: body.desc,
              onOk: () => {}
            })
            this.isSubmiting = false
          }, 500)
        }
      }
    },
    mounted () {
      this.$store.dispatch('getCode', 'area')
    }
  }
</script>

<style lang="less">
  #page-forget-pass {
    background: no-repeat center center;
    background-size: cover;
    position: absolute;
    background-image: url(../../assets/images/pages/register/bg.jpg);
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    overflow: auto;
    .ivu-input {
        border-color: #CDC8B1;
      }
    .container-box {
      width: 600px;
      height: auto;
      padding: 20px 30px;
      margin: 0 auto;
      margin-top: 80px;
      margin-bottom: 20px;
      z-index: 99;
      background-color: #fff;
      border-radius: 2px;
      box-sizing: border-box;

      .register-tips {
        height: 30px;
        line-height: 30px;
        background: #FEEDEF;
        color: #F72239;
        font-size: 12px;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        text-align: center;
      }

      h1 {
        font-size: 24px;
        font-weight: normal;
        margin-top: 0px;
        margin-bottom: 20px;
        color:#333C48;
        font-weight: bold;
      }
    }
  }
</style>
